<template>
	<!-- 修改身份证号 -->
	<view class="wm">
		<view class="form">
			<!-- 表单 -->
			<uni-forms ref="form" :modelValue="FormData" :rules="rules">
				<!-- 手机号码 -->
				<uni-forms-item label="手机号:" name="phone" labelWidth="100" required ref="phone">
					<uni-easyinput type="text" v-model="FormData.phone" placeholder="请输入手机号" />
				</uni-forms-item>
				<!-- 验证码 -->
				<uni-forms-item label="验证码:" name="verification_code" labelWidth="100" required>
					<view class="form-ib">
						<uni-easyinput type="text" class="input" v-model="FormData.verification_code" placeholder="请输入验证码" />
					    <button :class="isDisabled? 'button0':'button'"  @click="getVerificationCode">{{btnText}}</button>
					</view>
				</uni-forms-item>
			</uni-forms>
			<button  @click="save" class="savebtn">保存</button>
			
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from "vuex"
	export default {
		data() {
			return {
				isDisabled:false,
				btnText:"获取验证码",
				getCodePhone:"",
				portCode:"",
				FormData:{
					phone:"",
					verification_code:"",
				},
				//验证
				rules:{
					//对手机号
					phone:{
						rules:[
							{
								required:true,
								errorMessage:"请输入手机号"
							},
							{
								validateFunction:(rule,value,data,callback) => {
									let RegExp = /^(?:(?:\+|00)86)?1(?:(?:3\d)|(?:4[5-9])|(?:5[0-35-9])|(?:6[2567])|(?:7[0-8])|(?:8\d)|(?:9[189]))\d{8}$/
									if(!RegExp.test(this.phone)){
										callback("请输入有效手机号")
									}
									callback()
								}
							}
						]
					},
					verification_code:{
						rules:[
							{
								required:true,
								errorMessage:"请输入验证码"
							}
						]
					}
				}
			};
		},
		computed:{
			...mapState("m_user",["userInfo","id"])
		},
		onShow(){
			this.init_data()
		},
		onReady(){
			this.$refs.form.setRules(this.rules)
		},
		methods:{
			...mapMutations("m_user",['updateUserInfo']),
			/**
			 * 保存
			 */
			save(){
				uni.showLoading()
				this.$refs.form.validate().then(async (res) => {
					//判断输入的验证码与手机信息得到的验证码是否一致，如果不一致则不修改数据
					if(this.FormData.verification_code != this.portCode) return uni.$showMsg("验证码错误");
					//判断提交的手机号码是否是获得验证码的手机号
					if(this.FormData.phone != this.getCodePhone) return uni.$showMsg("请使用获得验证码的手机号")
					//组织要修改的数据
					let $query = {
						"token":this.userInfo.token,
						"id":this.userInfo.id,
						"phone":res.phone,
					}
					//请求数据接口修改数据
					const {data:result} = await uni.$http.post("Users/updateUserInfo",$query)
					if(result.meta.status == 0) return uni.$showMsg(result.meta.msg);
					result.data['token'] = this.userInfo.token
					//修改成功之后更新storage中的用户信息
					this.updateUserInfo(result.data);
					uni.hideLoading()
					uni.$showMsg(result.meta.msg);
					//返回管理页面
					setTimeout(()=>{
						uni.navigateBack({
							url:"/subpkg/manage/manage"
						})
					},1500);
				}).catch(err => {
					uni.hideLoading()
					uni.$showMsg(err[0].errorMessage);
				})
			},
			/**
			 * 初始化
			 */
			init_data(){
				this.FormData.phone = this.userInfo.phone
			},
			/**
			 * 获取验证码
			 */
			async getVerificationCode(){
				//如果按钮处于禁用状态不可以点击
				if(this.isDisabled){return}
				let phone = this.FormData.phone
				if(phone.length == 0){
					return uni.$showMsg("请输入手机号");
				}else{
					let RegExp = /^(?:(?:\+|00)86)?1(?:(?:3\d)|(?:4[5-9])|(?:5[0-35-9])|(?:6[2567])|(?:7[0-8])|(?:8\d)|(?:9[189]))\d{8}$/
					if(!RegExp.test(this.FormData.phone)){
					  return uni.$showMsg("请输入有效手机号");
					}
					//开始计时器
				    this.startCountdown();
					//把获取验证码的手机号保存起来
					this.getCodePhone = this.FormData.phone;
					//创建请求参数
					let require = {
						"tel":this.FormData.phone,
						"codetype":5
					}
					//向后台请求发送手机验证码的接口
					const {data:result} = await uni.$http.post("Users/sendMes",require);
					if(result.meta.status == 0) return uni.$showMsg(result.meta.msg);
					this.portCode = result.data.code
					console.log(this.portCode);
					uni.$showMsg("验证码已发送");
				}
			},
			startCountdown(){
				let count = 60; //倒计时的秒数
				const timer = setInterval(() => {
					if (count <= 0) {
					  clearInterval(timer); // 倒计时结束，清除计时器
					  this.resetButtonState(); // 复原按钮状态
					} else {
					  this.btnText = `${count}s后再获取`; // 更新按钮文本内容
					  this.isDisabled = true; // 禁用按钮
					  count--; // 减少剩余时间
					}
				}, 1000);
				
			},
			resetButtonState() {
			  this.btnText = '获取验证码'; // 恢复按钮文本内容
			  this.isDisabled = false; // 启用按钮
			}
		}
			
	}
</script>

<style lang="scss">
.form{
	background-color:#fff;
	margin-top:30rpx;
	padding:20rpx;
	border-radius: 15rpx;
}
.form-ib{
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.input{
	width: 40%;
}
.button{
	margin-left:10rpx;
	background:linear-gradient(to right,#93bdf3,#68d0e3);
	width:108px;
	height: 35px;
	line-height: 35px;
	color:#fff;
	border: 0;
	font-size:30rpx;
}
.button0{
	margin-left:10rpx;
	background:#ccc;
	width:108px;
	height: 35px;
	line-height: 35px;
	color:#fff;
	border: 0;
	font-size:30rpx;
}
.savebtn{
	background:linear-gradient(to  right,#feb27a,#ff7d5d);
	color:#fff;
	height: 35px;
	border:0;
	line-height: 35px;
	&:active{
		background:linear-gradient(to  right,#eba470,#e97055);
	}
}
</style>
